<template>
  <view class="message-page">
    <view class="tabs">
      <Tabs
        :list="tabs"
        itemStyle="padding: 0 30px;height:50px;font-size: 28px;"
        :activeStyle="{
          color: '#1AC678',
          fontWeight: 'bold',
          fontSize: '28rpx',
        }"
        :inactiveStyle="{
          color: '#fff',
          fontSize: '28rpx',
          fontWeight: 'bold',
        }"
      ></Tabs>
    </view>
    <scroll-view class="main">
      <view
        v-for="(item, index) in 10"
        :key="index"
        class="main-item"
        @click="gotoPage(item)"
      >
        <view class="main-item-idx">{{ index + 1 }}</view>
        <view class="main-item-title">农业最新通知会议</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Tabs from "@/components/tabs/index.vue";
export default {
  components: {
    Tabs,
  },
  data() {
    return {
      tabs: [],
      tabsIndex: 0,
    };
  },
  onLoad() {},
  mounted() {
    setTimeout(() => {
      this.tabs = [
        {
          name: "农业局通知公告",
        },
        {
          name: "气象预警",
        },
        {
          name: "灾情预警",
        },
        {
          name: "虫害预警",
        },
        {
          name: "农业局通知公告",
        },
        {
          name: "气象预警",
        },
        {
          name: "灾情预警",
        },
        {
          name: "虫害预警",
        },
      ];
    }, 1000);
  },
  methods: {
    onTabsChange(item, index) {
      this.tabsIndex = index;
    },
    gotoPage(item) {
      this.$u.route({
        url: `/pages/message/details`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.message-page {
  width: 100%;
}
.tabs {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 254rpx;
  background: #1ac678;
  padding-top: 138rpx;
  z-index: 10;
}
.scrollview {
  white-space: nowrap;
  height: 100%;
  &-item {
    position: relative;
    display: inline-block;
    height: 70rpx;
    // padding: 0 15px;
    margin: 0 25rpx;
    position: relative;
  }
  &-text {
    line-height: 70rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0 20rpx;
  }
  &-text-active {
    width: 100%;
    height: 70rpx;
    background: #ffffff;
    border-radius: 53rpx;
    color: #1ac678 !important;
  }
  &-text-active-pic {
    position: absolute;
    bottom: -15rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 30rpx;
  }
}
.main {
  padding: 0 32rpx;
  box-sizing: border-box;
  &-item {
    display: flex;
    flex-direction: row;
    padding: 40rpx 0;
    border-bottom: 2rpx solid #e9e9e9;
    &-idx {
      font-size: 28rpx;
      font-weight: bold;
      color: #1ac678;
      margin-right: 25rpx;
    }
    &-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #202020;
    }
  }
}
</style>
